<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>全选/反选/多选</title>
</head>

<body>
    <div id="app">
        <div class="row">
            <div class="relatedInstance">
                <ul>
                    <li id="">
                        <div class="tabItem">
                            <input type="checkbox" v-model="aaa" />
                            <span @click="sF"> 人员 </span>
                        </div>

                        <ul v-show="hh">
                            <li v-for="(item,index) in entities[0].child">
                                <input type="checkbox" v-model="item.check" />
                                <span>{{item.text}}</span>
                            </li>
                        </ul>
                    </li>
                    <li id="">
                        <div class="tabItem">
                            <input type="checkbox" v-model="aaa1" />
                            <span @click="hh1 = !hh1"> 项目 </span>
                        </div>

                        <ul v-show="hh1">
                            <li v-for="(item,index) in entities[1].child">
                                <input type="checkbox" v-model="item.check" />
                                <span>{{item.text}}</span>
                            </li>

                        </ul>
                    </li>
                    <li id="">
                        <div class="tabItem">
                            <input type="checkbox" v-model="aaa2" />
                            <span @click="hh2 = !hh2"> 机构 </span>
                        </div>

                        <ul v-show="hh2">
                            <li v-for="(item,index) in entities[2].child">
                                <input type="checkbox" v-model="item.check" />
                                <span>{{item.text}}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script src="./vue.js"></script>
    <script>
        var newlist = new Vue({
            el: "#app",
            data: {

                hh: false,
                hh1: false,
                hh2: false,
                entities: [
                    {
                        text: "人员",
                        child: [
                            { text: "第一组01", check: false },
                            { text: "第一组02", check: false },
                            { text: "第一组03", check: false },
                            { text: "第一组04", check: false },
                            { text: "第一组05", check: false },
                        ],
                    },
                    {
                        text: "项目",
                        child: [{ text: "第二组01", check: false }, { text: "第二组02", check: false }],
                    },
                    {
                        text: "机构",
                        child: [
                            { text: "第三组01", check: false },
                            { text: "第三组02", check: false },
                            { text: "第三组03", check: false },
                            { text: "第三组04", check: false },
                        ],
                    },
                ],
            },
            methods: {
                sF() {
                    this.hh = !this.hh;
                    if (this.hh == true) {
                        this.hh1 = false
                        this.hh2 = false
                    }
                }
            },
            computed: {
                aaa: {
                    get() {
                        return this.entities[0].child.every((item) => {
                            return item.check == true
                        })
                    },

                    set(v) {
                        this.entities[0].child.forEach((item) => {
                            item.check = v
                        })
                    }
                },
                aaa1: {
                    get() {
                        return this.entities[1].child.every((item) => {
                            return item.check == true
                        })
                    },
                    set(v) {
                        this.entities[1].child.forEach((item) => {
                            item.check = v
                        })
                    }
                },
                aaa2: {
                    get() {
                        return this.entities[2].child.every((item) => {
                            return item.check == true
                        })
                    },
                    set(v) {
                        this.entities[2].child.forEach((item) => {
                            item.check = v
                        })
                    }
                }
            },
        });
    </script>
</body>

</html>
<style>
    .relatedInstance {
        width: 800px;
        margin: 0 auto;
    }

    .relatedInstance ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .relatedInstance>ul>li {
        margin-bottom: 20px;
    }

    .relatedInstance>ul>li>h3 {
        background: #f3f2f0;
        color: #6bacdf;
        font-size: 14px;
        text-align: center;
        line-height: 26px;
    }

    .relatedInstance>ul>li>ul>li {
        padding-left: 28px;
        overflow: hidden;
        width: 100%;
        font-size: 14px;
        color: #999;
        line-height: 20px;
        min-height: 20px;
        text-decoration: underline;
        cursor: pointer;
        margin: 5px 0;
    }

    .relatedInstance>ul>li>ul>li {
        word-wrap: break-word;
    }

    .relatedInstance li h3 {
        cursor: pointer;
    }

    .relatedInstance li h3 span {
        float: right;
        line-height: 26px;
        margin-right: 5px;
    }

    .relatedInstance li li:hover {
        color: #333;
    }

    .relatedInstance li ul {
        overflow: hidden;
    }

    .relatedInstance li h3 {
        position: relative;
    }

    .relatedInstance li li {
        position: relative;
    }

    .relatedInstance li h3 b,
    .relatedInstance li li b {
        position: absolute;
        top: 1px;
        left: 5px;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        width: 18px;
        height: 18px;
        background: url(../images/blue.png);
        border: none;
        cursor: pointer;
        background-position: 0 0;
        margin-right: 5px;
    }

    .relatedInstance li h3 b {
        position: absolute;
        top: 4px;
    }

    .relatedInstance li h3 b:hover,
    .relatedInstance li li b:hover {
        background-position: -20px 0;
    }

    .relatedInstance li h3 b.checked,
    .relatedInstance li li b.checked {
        background-position: -40px 0;
    }

    .tabItem {
        width: 100%;
        height: 20px;
        background-color: rosybrown;
        color: #fff;
        padding: 5px;
    }
</style>